import { useState, forwardRef, useImperativeHandle } from "react";
import { Modal, Radio, Form, Input, Select, Switch, message } from "antd";
import { addMenu, editMenu, getMenuInfo } from "../../request/api";
const { Option } = Select;
const layout = {
    labelCol: {
        span: 4,
    },
    wrapperCol: {
        span: 16,
    },
};
const App = forwardRef((props, ref) => {
    const { isShow, cancel, isAdd, menulist, getMenuList } = props;
    // 单选框初始化的值
    const [value, setValue] = useState(1);
    // 定义一个编辑id
    const [editId, setEditId] = useState(0);

    //封装一个重置事件
    const reset = () => {
        cancel()
        form.resetFields();
    }
    // 暴露ref方法
    useImperativeHandle(ref, () => ({
        lookup
    }))
    //  封装一个函数回显事件
    const lookup = (id) => {
        setEditId(id);
        // 调取获取一条数据接口
        getMenuInfo({ id }).then((res) => {
            console.log(res, '回显');
            if (res.code == 200) {
                form.setFieldsValue(res.list);
            }
        })
    }
    const handleOk = () => {
        //进行规则验证
        form
            .validateFields()
            .then((val) => {
                // console.log(val, "valvalvalval");
                // console.log(form.getFieldValue(),'获取表单内容');
                if (isAdd) {
                    //调用添加接口
                    addMenu(val).then((res) => {
                        console.log(res, "添加接口");
                        if (res.code == 200) {
                            message.success(res.msg);
                            reset();
                            getMenuList();
                        } else {
                            message.error(res.msg);
                        }
                    });
                } else {
                    //调用编辑接口
                    console.log(val, "编辑");
                    editMenu({
                        ...val,
                        id: editId,
                    }).then((res) => {
                        if (res.code == 200) {
                            message.success(res.msg);
                            reset();
                            getMenuList();
                        } else {
                            message.error(res.msg);
                        }
                    });
                }
            })
            .catch((err) => { });
    };
    //表单内容
    const [form] = Form.useForm();
    // 单选框的change事件
    const onChange = (e) => {
        setValue(e.target.value)
    }
    // 封装一个切换下拉事件
    const changeSelect = (e) => {
        // 重新设置value
        setValue(e == 0 ? 1 : 2)
        form.setFieldsValue({
            type: e == 0 ? 1 : 2,
        })
    }
    return (
        <div>
            <Modal
                title={isAdd ? "菜单添加" : "菜单编辑"}
                visible={isShow}
                onOk={handleOk}
                onCancel={cancel}
                okText="确定"
                cancelText="取消"
            >
                <Form {...layout} form={form} name="control-hooks" >
                    <Form.Item name="title" label="菜单添加"
                        rules={[{
                            required: true,
                            message: "请输入菜单标题"
                        }]}>
                        <Input />
                    </Form.Item>
                    <Form.Item
                        name="pid"
                        label="上级菜单"
                        rules={[
                            {
                                required: true,
                                message: "请选择上级菜单",
                            },
                        ]}
                    >
                        <Select
                            onChange={changeSelect}
                            placeholder="请选择上级菜单"
                            allowClear
                        >
                            <Option value={0}>顶级菜单</Option>
                            {menulist.map((item) => (
                                <Option key={item.id} value={item.id}>
                                    {item.title}
                                </Option>
                            ))}
                        </Select>
                    </Form.Item>
                    <Form.Item name="type" label="菜单类型" initialValue={value}>
                        <Radio.Group onChange={onChange} value={value}>
                            <Radio value={1} disabled>
                                目录
                            </Radio>
                            <Radio value={2} disabled>
                                菜单
                            </Radio>
                        </Radio.Group>
                    </Form.Item>
                    {value == 1 ? (
                        <Form.Item name="url" label="地址">
                            <Input />
                        </Form.Item>
                    ) : (
                        <Form.Item name="icon" label="图标">
                            <Input />
                        </Form.Item>
                    )}
                    <Form.Item
                        initialValue={1}
                        valuePropName="checked"
                        name="status"
                        label="状态"
                    >
                        <Switch />
                    </Form.Item>

                </Form>
            </Modal>
        </div>
    )
});
export default App